<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
    <title>智慧社区-物业管理</title>

    <meta name="description" content="Dashboard" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resource/assets/css/component.css" />
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/resource/assets/img/favicon.png" type="image/x-icon">

    <link href="${pageContext.request.contextPath}/resource/assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/resource/assets/css/font-awesome.min.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/resource/assets/css/beyond.min.css" rel="stylesheet" type="text/css" />
    <link href="${pageContext.request.contextPath}/resource/assets/css/animate.min.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/resource/assets/css/dataTables.bootstrap.css" rel="stylesheet" />
    
		<script src="${pageContext.request.contextPath}/resource/assets/js/modernizr.custom.js"></script>
    <!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
    <script src="${pageContext.request.contextPath}/resource/assets/js/skins.min.js"></script>

</head>
<body>
<div class="md-modal md-effect-11" id="modal-11">
			<div class="md-content">
			 <div class="modal-palegreen">
				 <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="closeModal()">×</button>
                                                            <h4 class="modal-title">发送消息</h4>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="row">
                                                                <div class="col-sm-12">
                                                                    <div class="form-group">
                                                                        <label for="exampleInputEmail2" id="receiver">消 息：</label>
                                                                        <span class="input-icon icon-right">
                                                                            <textarea class="form-control" rows="10" id="message"></textarea>
                                                                            <i class="glyphicon glyphicon-briefcase darkorange"></i>
                                                                        </span>
                                                                    </div>
                                                                    <input type="hidden" name="receiveId" id="receiveId"  />
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-warning" data-dismiss="modal" onclick="closeModal()">取 消</button>
                                                            <button type="button" class="btn btn-primary" onclick="sendMessage()">发 送</button>
                                                        </div>
                                                    </div><!-- /.modal-content -->
                                                </div><!-- /.modal-dialog -->
                                                </div>
			</div>
		</div>
<%@include file="../header.jsp" %>
	<!-- Main Container -->
    <div class="main-container container-fluid">
        <!-- Page Container -->
        <div class="page-container">
            <!-- Page Sidebar -->
            <%@include file="../nav.jsp" %><!-- /Page Sidebar -->
            <!-- Page Content -->
            <div class="page-content">
                <!-- Page Breadcrumb -->
                <div class="page-breadcrumbs">
                    <ul class="breadcrumb" style="margin-top: 8px;">
                        <li>
                            <i class="fa fa-home"></i>
                            <a href="../property.jsp">首页</a>
                        </li>
                        <li><a href="#">费用管理</a></li>
                        <li class="active">缴费登记</li>
                    </ul>
                </div><!-- /Page Breadcrumb -->
                <!-- Page Header -->
                <div class="page-header position-relative">
                    <div class="header-title" style="margin-top: 2px;">
                        <h1>
                         缴费登记
                        </h1>
                    </div><!--Header Buttons-->
                    <div class="header-buttons">
                        <a class="sidebar-toggler" href="#">
                            <i class="fa fa-arrows-h"></i>
                        </a>
                        <a class="refresh" id="refresh-toggler" href="">
                            <i class="glyphicon glyphicon-refresh"></i>
                        </a>
                        <a class="fullscreen" id="fullscreen-toggler" href="#">
                            <i class="glyphicon glyphicon-fullscreen"></i>
                        </a>
                    </div><!--Header Buttons End-->
                </div><!-- /Page Header -->
                <!-- Page Body -->
                <div class="page-body">
               	<div class="row">
				                        <div class="col-xs-12 col-md-12">
				                            <div class="widget">
				                                <div class="widget-header bordered-bottom bordered-yellow">
				                                    <span class="widget-caption">搜索业主姓名</span>
				                                    <div class="widget-buttons">
				                                        <a href="#" data-toggle="maximize">
				                                            <i class="fa fa-expand"></i>
				                                        </a>
				                                        <a href="#" data-toggle="collapse">
				                                            <i class="fa fa-minus"></i>
				                                        </a>
				                                        <a href="#" data-toggle="dispose">
				                                            <i class="fa fa-times"></i>
				                                        </a>
				                                    </div>
				                                </div>
				                                <div class="widget-body no-padding">
				                                    <table class="table table-bordered table-hover table-striped" id="searchable" style="width: 100% !important;">
				                                        <thead class="bordered-darkorange">
				                                            <tr role="row">
				                                                <th>选择</th>
										                        <th>区域</th>
										                        <th>栋</th>
										                        <th>单元</th>
										                        <th>室</th>
										                        <th>业主</th>
										                        <th>操作</th>
				                                            </tr>
				                                        </thead>
				
				                                        <tfoot>
				                                            <tr>
				                                                <th>选择</th>
										                        <th>区域</th>
										                        <th>栋</th>
										                        <th>单元</th>
										                        <th>室</th>
										                        <th>业主</th>
										                        <th>操作</th>
				                                            </tr>
				                                        </tfoot>
				                                        <tbody>
				                                          
				                                        </tbody>
				                                    </table>
				                                </div>
				                            </div>
				                        </div>
				                    </div>
                	 <div class="row">
                                <div class="col-lg-12 col-sm-12 col-xs-12">
                                    <div class="row">
                                        <div class="col-lg-6 col-sm-6 col-xs-12">
	                		<div class="widget">
                                        <div class="widget-header bordered-bottom bordered-palegreen">
                                            <span class="widget-caption">缴费登记</span>
                                        </div>
                                        <div class="widget-body">
                                           <div id="registration-form">
                                                        <form role="form">
                                                            <div class="form-title">
                                                            	缴费信息
                                                            </div>
                                                            	<div class="form-group">
                                                                        <span class="input-icon icon-right">
                                                                            <input type="text" class="form-control" placeholder="所属小区" value="${loginUser.loginVillage.name}" disabled>
                                                                            <i class="fa fa-globe circular"></i>
                                                                       </span>
                                                              	</div>
                                                            
                                                            <div class="form-group">
                                                                <span class="input-icon icon-right">
                                                                    <input id="tvUser" type="text" class="form-control"  placeholder="缴费人" value="${payment.house.name }" disabled>
                                                                    <i class="glyphicon glyphicon-user circular"></i>
                                                                </span>
                                                            </div>
                                                            <div class="form-group">
                                                                 <select id="stType" style="width:100%;">
                                                                 		<option value="0"> 费用类型 </option>
                                                                 		<option value="1">物业费</option>
                                                                 		<option value="2">水费</option>
												                        <option value="3">电费</option>
												                        <option value="4">其他</option>
                                            						</select>
                                                            </div>
                                                            <div class="form-group">
                                                                <span class="input-icon icon-right">
                                                                    <input id="tvComment" type="text" class="form-control"  placeholder="费用类型为其他时，请填写备注..." value="${payment.remark }" disabled>
                                                                    <i class="glyphicon glyphicon-fire circular"></i>
                                                                </span>
                                                            </div>
                                                             <div class="form-group">
                                                                <span class="input-icon icon-right">
                                                                    <input id="tvAmount" type="text" class="form-control"  placeholder="缴费金额" value="${payment.priceWithDiscount }">
                                                                    <i class="fa fa-yen circular"></i>
                                                                </span>
                                                            </div>
                                                            <div class="form-group">
                                                                <div class="checkbox">
				                                                        <label>
				                                                            <input type="checkbox" class="colored-blue" id="cbEnable" onclick="cbOnCheck(this)" checked>
				                                                            <span class="text">使用费用有效期</span>
				                                                        </label>
				                                                    </div>
                                                            </div>
                                                           <div class="form-group">
									                                            <div class="controls">
									                                                <div class="input-group">
									                                                    <input type="text" class="form-control" id="reservation" placeholder="有效时间段" />
									                                                    <span class="input-group-addon">
									                                                        <i class="fa fa-calendar"></i>
									                                                    </span>
									                                                </div>
									                                            </div>
                                                            </div>
                                                            
                                                            <hr class="wide" />
                                                            <div class="row" style="text-align: right;margin-right: 10px;">
                                                            	<button type="button" class="btn btn-warning" onclick="cancel()"> 取 消 </button>
                                                            	<button type="button" class="btn btn-blue" onclick="save()"> 保 存 </button>
                                                            </div>
                                                            
                                                        </form>
                                                    </div> 
                                        </div>
                                    </div>
	                			</div>
                                        
                              </div>
                         </div>
                     </div>
                </div><!-- /Page Body -->
             </div><!-- /Page Content -->
     	</div><!-- /Page Container -->
     </div><!-- /Main Container -->
     	<div class="md-overlay" onclick="closeModal()"></div>
     	<script src="${pageContext.request.contextPath}/resource/assets/js/jquery-2.0.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/resource/assets/js/bootstrap.min.js"></script>

    <!--Beyond Scripts-->
    <script src="${pageContext.request.contextPath}/resource/assets/js/beyond.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/assets/js/datatable/jquery.dataTables.min.js"></script>
    <script src="${pageContext.request.contextPath}/resource/assets/js/datatable/ZeroClipboard.js"></script>
    <script src="${pageContext.request.contextPath}/resource/assets/js/datatable/dataTables.tableTools.min.js"></script>
    <script src="${pageContext.request.contextPath}/resource/assets/js/datatable/dataTables.bootstrap.min.js"></script>
		<script>
			var polyfilter_scriptpath = '/js/';
		</script>
		<script src="${pageContext.request.contextPath}/resource/assets/js/cssParser.js"></script>
		<script src="${pageContext.request.contextPath}/resource/assets/js/css-filters-polyfill.js"></script>
   <script src="${pageContext.request.contextPath}/resource/assets/js/bootbox/bootbox.js"></script>
   <script src="${pageContext.request.contextPath}/resource/assets/js/fuelux/wizard/wizard-custom.js"></script>
    <script src="${pageContext.request.contextPath}/resource/assets/js/toastr/toastr.js"></script>
    <script src="${pageContext.request.contextPath}/resource/assets/js/select2/select2.js"></script>
    <script src="${pageContext.request.contextPath}/resource/assets/js/datetime/moment.js"></script>
    <script src="${pageContext.request.contextPath}/resource/assets/js/datetime/daterangepicker.js"></script>
    <script type="text/javascript">
    var start = "${payment.startAt}";
    var end = "${payment.endAt}";
    var objectId = "${payment.objectId}";
    var houseId = "${payment.house.objectId}";
    
    	$(document).ready(function(){
    		$('#menu_fee').addClass("active open");
        	$('#menu_feeadd').addClass("active");
        	$("#stType").select2();
            if(start != ""){
        		var startAt = unixToDate(start);
        		var endAt = unixToDate(end);
        		var date = startAt + " - " + endAt;
        		$('#reservation').val(date);
        		$('#stType').val("${payment.type}").trigger("change");
        	}
            $("#stType").on("change",function(event){
        		if(event.val == "4" || event.val == 4){
        			$('#tvComment').attr('disabled',false);
        		}else{
        			$('#tvComment').attr('disabled',true);
        		}
        	});
        	$('#reservation').daterangepicker({
    		}, function(startDate, endDate) {
    			start = startDate+"";
    			end = endDate+"";
    		});
        	
    		$('#searchable').dataTable({
                "sDom": "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",
                "aLengthMenu": [
                   [5, 10, 25],
                   [5, 10, 25]
                ],
                "iDisplayLength": 5,
                "oTableTools": {
                    "aButtons": [
						{
						    "sExtends": "copy",
						    "sButtonText": "复制"
						 },
						 {
							    "sExtends": "print",
							    "sButtonText": "打印"
							 },
				        {
				            "sExtends": "collection",
				            "sButtonText": "保存 <i class=\"fa fa-angle-down\"></i>",
				            "aButtons": ["csv", "xls", "pdf"]
				        }
						
				        ],
                },
                "oLanguage": {
                    "sLengthMenu": "_MENU_",
                    "sZeroRecords": "对不起，查询不到任何相关数据",
                    "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                    "sInfoEmpty": "找不到相关数据",
                    "sInfoFiltered": "数据表中共为 _MAX_ 条记录)",
                    "sProcessing": "正在加载中...",
                    "sSearch": "",
                    "sUrl": "", 
                    "oPaginate": {
                        "sFirst":    " 首页",
                        "sPrevious": " 上一页 ",
                        "sNext":     " 下一页 ",
                        "sLast":     " 末页 "
                    }
                },
                "bStateSave": true,
                "bProcessing": false, 
         		"bServerSide": true,
         		"bSort": false,
         	    "sAjaxSource": "house_list",
         	    "fnServerData": retrieveData, 
         	    "aoColumns":
         	           [  
								{ "mData": "rowIndex",
								  "sDefaultContent" : "",
								  "sWidth":"60px",
								  "mRender": function (data, type, full) {
									  if(full.objectId == "${payment.house.objectId}"){
										  return '<div class="radio" style="margin-top:-20px !important;"><label><input name="selectRadio" title="'+full.name+'" onchange="onChange(this)" value="'+full.objectId+'" type="radio" class="colored-blue" checked>'+
	                                      '<span class="text"></span></label></div>';
									  }else {
										  return '<div class="radio" style="margin-top:-20px !important;"><label><input name="selectRadio" onchange="onChange(this)" title="'+full.name+'" value="'+full.objectId+'" type="radio" class="colored-blue">'+
	                                      '<span class="text"></span></label></div>';
										}
									  
		                     		}
								},
								{ "mData": "region","sDefaultContent" : ""}, 
					        	{ "mData": "building","sDefaultContent" : ""},
					        	{ "mData": "entrance","sDefaultContent" : ""},
					        	{ "mData": "number","sDefaultContent" : ""},
					        	{ "mData": "name","sDefaultContent" : ""},
								{ "mData": "operate",
		         	        		"sDefaultContent" : "",
		         	        		"sWidth":"160px",
		         	        		"mRender": function (data,type,full){
		         	        			return '<div class="btn-group">'+
		         	        			'<a class="btn btn-azure" title="'+full.objectId+'" name="'+full.disAddress+'" href="#" onclick="showModal(this)">发送消息</a>'+
		         	        			'<a class="btn btn-azure dropdown-toggle" data-toggle="dropdown" href=""><i class="fa fa-angle-down"></i></a>'+
		         		        		' <ul class="dropdown-menu dropdown-azure">'+
		         		        		'<li><a title="'+full.objectId+'" href="" onclick="editHouse(this)">编辑房产</a></li>'+
		         		        		 '</ul></div>';
		         	        		}
		         	        	}
         	            ]
         		
            });
            
    		function retrieveData( sSource,aoData, fnCallback) {
            	iRowIndex = 1;
    			$.ajax({
    				"url" : sSource,
    				"data" : {"aoData":JSON.stringify(aoData)},
    				"type" : 'post',
    				"dataType" : 'json',
    				"success" : function(result) {
    					$('.loading-container').hide();
    					if(result == 201){
    						alert("鉴权已过期，请重新登录");
    						location.href="/WisdomHome";
    						return;
    					}
    					fnCallback(result);
    				},
    				"error" : function(msg) {
    					alert("error msg:"+msg.responseText);
    				}
    			});
    		}
            
    	});
    	
    	function editHouse(obj){
    		$.ajax({
    			"url" : "manager_editHouse",
				"data" : {houseId:obj.title},
				"type" : 'post',
				"dataType" : 'json',
				"success" : function(result) {
					if(result == 201){
						alert("鉴权已过期，请重新登录");
						location.href="/WisdomHome";
						return;
					}
					if(result == 200){
						location.href="${pageContext.request.contextPath}/jsp/house/add1.jsp";
					}else if(result == 202){
						alert("很抱歉，该房产已被业主绑定，无法修改，请联系业主！");
					}
				},
				"error" : function(msg) {
					alert("error msg:"+msg.responseText);
				}
    		});
    	}
    	
    	function showModal(obj){
    		$('#receiveId').val(obj.title);
    		$('#receiver').html(obj.name+" :");
    		$('#modal-11').addClass("md-show");
    	}
    	
    	function closeModal(){
    		$('#modal-11').removeClass("md-show");
    	}
    	
    	function sendMessage(){
    		var houseId = $('#receiveId').val();
    		var message = $('#message').val();
    		
    		if($.trim(message) == ""){
    			return;
    		}
    		
    		$.ajax({
    			"url" : "push_toHouse",
				"data" : {houseId:houseId,message:message},
				"type" : 'post',
				"dataType" : 'json',
				"success" : function(result) {
					if (result == 200) {
						alert("发送成功");
						closeModal();
					}else {
						alert("鉴权已过期，请重新登录");
						location.href="/WisdomHome";
						return;
					}
				},
				"error" : function(msg) {
					alert("error msg:"+msg.responseText);
				}
    		});
    	}
    	
    	function save(){
    		var type = $('#stType').val();
    		var remark = $('#tvComment').val();
    		var priceWithDiscount = $('#tvAmount').val();
    		var startAt = start;
    		var endAt = end;
    		var payman = $('#tvUser').val();
    		
    		if ($.trim(priceWithDiscount) == "") {
    			alert("请填写缴费金额");
    			return;
    		}
    		
    		
    		if ($('#cbEnable').is(':checked')) {
    			if(startAt == "" || endAt == ""){
    				alert("请填写有效期");
    				return;
    			}
    		}
    		
    		if(type == "0" || type == 0){
    			if($.trim(remark) == ""){
    				alert("请填写备注");
    				return;
    			}
    			
    			if ($.trim(payman) == "") {
    				alert("请填写缴费人");
    				return;
    			}
    		}else {
    			if(houseId == ""){
    				alert("请选择缴费房产");
    				return;
    			}
    		}
    		$('.loading-container').show();
    		$.ajax({
    			"url":"payment_add",
    			"data":{objectId:objectId,type:type,hid:houseId,payman:payman,remark:remark,priceWithDiscount:priceWithDiscount,startAt:startAt,endAt:endAt},
    			"type":'post',
    			"dataType":'json',
    			"success" : function(result) {
    				$('.loading-container').hide();
    				
    				if (result == 201){
    					alert("鉴权已过期，请重新登录");
    					location.href="/WisdomHome";
    					return;
    				}
    				
    				if(result == 403){
    					alert("该房产还未被认领，无法缴费，请联系业主");
    					return;
    				}
    				
    				if (result == 200) {
    					alert("缴费信息保存成功");
    					cancel();
    				}else{
    					alert("提交失败，请检查网络后重试~");
    				}
    			},
    			"error" : function(msg) {
    				$('.loading-container').hide();
    				alert("error msg:"+msg.responseText);
    			}
    		});
    	}
    	
    	function cancel(){
    		$('#tvUser').val("");
			$('#tvComment').val("");
			$('#tvAmount').val("");
			$('#stType').val("1");
			$('#reservation').val("");
        	start = "";
			end = "";
    	}
    	
    	function onCheck(obj){
        	if (obj.checked) {
        		$('#tvBail').attr('disabled',false);
    		} else {
    			$('#tvBail').attr('disabled',true);
    		}
        }
        
       	function onChange(obj){
       		$('#tvUser').val(obj.title);
        	houseId = obj.value;
        }
       	
        function cbOnCheck(obj){
        	if(obj.checked){
        		$('#reservation').attr('disabled',false);
        	}else {
        		$('#reservation').attr('disabled',true);
    		}
        }
        
        $(window).unload(function(){
        		<%session.removeAttribute("payment");%>
        	});
    </script>
</body>
</html>